<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style lang="less">
.dark-side.theme_color_blue .el-menu-item,
.dark-side.theme_color_blue .el-submenu__title {
  height: 60px !important;
  margin-bottom: 25px;
  padding: 2px 20px;
}

.el-menu--collapse {
  width: 93px !important;
}

.dark-side.theme_color_blue .vaw-tab-bar-container .is-active {
  color: #48A4D9 !important;
}

.dark-side.theme_color_blue .el-menu-item.is-active {
  background: #fff !important;
}

.dark-side.theme_color_blue .el-menu-item,
.dark-side.theme_color_blue .el-submenu__title {
  margin-top: 20px !important;
  border-radius: 10px 0 0 10px !important;
}

.dark-side.theme_color_blue .logo-wrapper {
  border: none !important;
}

.el-card__body {
  padding: 16px !important;
}

/* 大屏幕 */
@media (min-width: 1921px) {
  .login_container {
    height: 100%;
    background-image: url(./assets/img/loginbj04.png), url(./assets/img/loginbj01.png), url(./assets/img/loginbj05.png), url(./assets/img/loginbj03.png), url(./assets/img/loginbj02.png);
    background-size: 1308px 453px, 2592px 996px, 830px 594px, 2262px 1101px, 494px 624px;
    background-position: left bottom, left bottom, right bottom, right top, left top;
    background-repeat: no-repeat;
    // background: url(./assets/img/loginImg.png) no-repeat;
    // background-size: 1870px 1052px;
    // background-attachment: fixed;
    // background-position: 10% 70%;
    box-sizing: border-box;
  }

  .top_ys {
    position: absolute;
    left: 140px;
    top: 120px;
    width: 50%;
    // width: 100%;
    // background-color: #f8f8f8;
  }

  .logo_ys {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background: url(./assets/img/logobg.png);
    background-size: cover;

    img {
      width: 98px;
      height: auto;
      margin-top: -2px;
      vertical-align: middle;
    }
  }

  .title_ys {
    margin-left: 60px;
    height: 120px;
    line-height: 120px;

    h2 {
      font-size: 2.5em;
    }
  }

  .login_main {
    position: absolute;
    top: 50%;
    right: 30%;
    width: 417px;
    //width: 600px;
    // height: 480px;
    margin-top: -260px;
    border-radius: 6px;
    //background-color: red;
    //background-color: rgba(255, 255, 255, .8);
    box-sizing: border-box;
  }

  .el-input__inner {
    border: none !important;
    border-bottom: 1px solid #DCDFE6 !important;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #48A4D9 !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #48A4D9 !important;
    border-color: #48A4D9 !important;
  }

  .el-button--primary {
    background-color: #48A4D9 !important;
    border-color: #48A4D9 !important;
  }

  // .el-tabs__item {
  //   font-size: 2em !important;
  // }
  // .el-input__inner {
  //   height: 62px !important;
  //   font-size: 1.8em !important;
  // }
  // .el-button {
  //   font-size: 1.6em !important;
  // }
  .w60 {
    width: 60%;
    margin: 0 auto !important;
  }

  //   .el-input__prefix, .el-input__suffix {
  //     font-size: 28px;
  //     margin-top: 12px;
  //     margin-left: 12px;
  //   }
  //   .el-input--prefix .el-input__inner {
  //     padding-top: 6px;
  //     padding-left: 50px !important;
  //   }
  //   .iconfont {
  //     font-size: 26px !important;
  //   }
  //   .el-form-item {
  //     margin-bottom: 32px !important;
  //   }
  //   .el-button {
  //     padding: 17px 20px !important;
  //   }
  //   .el-checkbox__label {
  //     font-size: 18px !important;
  //   }
  //   .el-form-item__content {
  //     font-size: 18px !important;
  //   }
  //   .login_other {
  //   font-size: 18px !important;
  //   img {
  //     width: 32px !important;
  //     height: auto;
  //   }
  // }
  // .el-form-item__error {
  //     font-size: 20px !important;
  //   }
}

@media (max-width: 1920px) {

  // .login_container {
  //   height: 100%;
  //   // background-image:url(./assets/img/loginbj04.png), url(./assets/img/loginbj01.png);
  //   // background-size: 1059px 367px, 1224px 689px;
  //   // background-position: left bottom, left bottom;
  //   // background-repeat: no-repeat;
  //   // background: url(./assets/img/loginImg.png) no-repeat;
  //   // background-size: 1224px 689px;
  //   // background-attachment: fixed;
  //   // background-position: -60px 80%;
  //   box-sizing: border-box;
  // }
  .login_container {
    height: 100%;
    background-image: url(./assets/img/loginbj05.png), url(./assets/img/loginbj04.png), url(./assets/img/loginbj01.png), url(./assets/img/loginbj03.png), url(./assets/img/loginbj02.png);
    background-size: 425px 304px, 670px 232px, 1062px 408px, 1042px 508px, 253px 319px;
    background-position: right bottom, left bottom, left bottom, right top, left top;
    background-repeat: no-repeat;
    // background: url(./assets/img/loginImg.png) no-repeat;
    // background-size: 1870px 1052px;
    // background-attachment: fixed;
    // background-position: 10% 70%;
    box-sizing: border-box;
  }

  .top_ys {
    position: absolute;
    left: 80px;
    top: 60px;
    width: 50%;
    box-sizing: border-box;
  }

  .logo_ys {
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: url(./assets/img/logobg.png);
    background-size: cover;

    img {
      width: 68px;
      height: auto;
      margin-top: -2px;
      vertical-align: middle;
    }
  }

  .title_ys {
    margin-left: 56px;
    height: 80px;
    line-height: 80px;

    h2 {
      font-size: 2.1em;
    }
  }

  .login_main {
    position: absolute;
    top: 50%;
    right: 30%;
    width: 417px;
    //width: 600px;
    // height: 480px;
    margin-top: -230px;
    border-radius: 6px;
    //background-color: red;
    //background-color: rgba(255, 255, 255, .8);
    box-sizing: border-box;
  }

  .el-input__inner {
    // border: none !important;
    // border-bottom: 1px solid #DCDFE6 !important;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #48A4D9 !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #48A4D9 !important;
    border-color: #48A4D9 !important;
  }

  .el-button--primary {
    // background-color: #48A4D9 !important;
    // border-color: #48A4D9 !important;
  }

  // .login_main {
  //   position: absolute;
  //   top: 50%;
  //   right: 10%;
  //   width: 480px;
  //   // height: 480px;
  //   margin-top: -290px;
  //   border-radius: 6px;
  //   background-color: rgba(255, 255, 255, .8);
  //   box-sizing: border-box;
  // }
  // .el-tabs__item {
  //   font-size: 1.3em !important;
  // }
  // .el-input__inner {
  //   font-size: 1.1em !important;
  // }
  // .el-button {
  //   font-size: 1.1em !important;
  // }
  .w60 {
    width: 60%;
    margin: 0 auto !important;
  }
}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {}

@media (max-width: 1199px) {

  .login_container {
    height: 100%;
    background-image: url(./assets/img/loginbj05.png), url(./assets/img/loginbj04.png), url(./assets/img/loginbj01.png), url(./assets/img/loginbj03.png), url(./assets/img/loginbj02.png);
    background-size: 340px 243px, 434px 150px, 765px 293px, 750px 343px, 202px 255px;
    background-position: right bottom, left bottom, left bottom, right top, left top;
    background-repeat: no-repeat;
    // background: url(./assets/img/loginImg.png) no-repeat;
    // background-size: 1870px 1052px;
    // background-attachment: fixed;
    // background-position: 10% 70%;
    box-sizing: border-box;
  }

  .top_ys {
    position: absolute;
    left: 50px;
    top: 60px;
    width: 50%;
    box-sizing: border-box;
  }

  .logo_ys {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: url(./assets/img/logobg.png);
    background-size: cover;

    img {
      width: 40px;
      height: auto;
      vertical-align: middle;
    }
  }

  .title_ys {
    margin-left: 12px;
    height: 50px;
    line-height: 44px;

    h2 {
      font-size: 1.4em;
    }
  }

  .login_main {
    position: absolute;
    top: 50%;
    right: 28%;
    width: 380px;
    //width: 600px;
    // height: 480px;
    margin-top: -200px;
    border-radius: 6px;
    //background-color: red;
    //background-color: rgba(255, 255, 255, .8);
    box-sizing: border-box;
  }

  .el-form-item {
    margin-bottom: 16px !important;
  }

  .w60 {
    width: 80%;
    margin: 0 auto !important;
  }

  // .el-tabs__item {
  //   font-size: 1.2em !important;
  // }
}

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) {
  .login_container {
    height: 100%;
    background-image: url(./assets/img/loginbj05.png), url(./assets/img/loginbj04.png), url(./assets/img/loginbj01.png), url(./assets/img/loginbj03.png), url(./assets/img/loginbj02.png);
    background-size: 340px 243px, 434px 150px, 765px 293px, 750px 343px, 202px 255px;
    background-position: right bottom, left bottom, left bottom, right top, left top;
    background-repeat: no-repeat;
    // background: url(./assets/img/loginImg.png) no-repeat;
    // background-size: 1870px 1052px;
    // background-attachment: fixed;
    // background-position: 10% 70%;
    box-sizing: border-box;
  }

  .top_ys {
    padding-top: 0px;
    height: 100px;
    overflow: hidden;
  }

  .title_ys {
    height: 42px;

    h2 {
      line-height: 32px;
      text-align: center;
    }
  }

  .login_main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    //height: 400px;
    margin-top: -300px;
    margin-left: -180px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .8);
  }

  .el-tabs__item {
    font-size: 1em !important;
  }

}

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 540px) {
  .login_container {
    height: 100%;
    background-image: url(./assets/img/loginbj05.png), url(./assets/img/loginbj04.png), url(./assets/img/loginbj01.png), url(./assets/img/loginbj003.png), url(./assets/img/loginbj002.png);
    background-size: 272px 194px, 434px 150px, 765px 293px, 416px 282px, 139px 113px;
    background-position: right bottom, left bottom, left 90%, right top, left 130px;
    background-repeat: no-repeat;
    // background: url(./assets/img/loginImg.png) no-repeat;
    // background-size: 1870px 1052px;
    // background-attachment: fixed;
    // background-position: 10% 70%;
    box-sizing: border-box;
  }

  .top_ys {
    left: 30px;
    top: 60px;
    //padding-top: 0px;
    height: 100px;
    overflow: hidden;
  }

  .logo_ys {
    width: 60px;
    height: 60px;
    line-height: 58px;
    background: url(./assets/img/logobg.png);
    background-size: cover;

    img {
      width: 54px;
      height: auto;
      vertical-align: middle;
    }
  }

  .title_ys {
    // margin-left: 56px;
    height: 60px;

    // line-height: 60px;
    h2 {
      font-size: 1.4em;
      line-height: 60px;

      span {
        display: none;

      }
    }
  }

  .login_other {
    div.line::before {
      margin-top: 20px;
    }

    div {
      text-align: center;
    }
  }

  .login_main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    //height: 400px;
    margin-top: -220px;
    margin-left: -160px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .8);
  }

  .login_form {
    padding: 0 16px !important;
  }

  .footer_ys {
    padding-bottom: 4px;
  }

  .el-tabs__item {
    height: 48px !important;
  }

  .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-input__inner {
    height: 32px !important;
  }

  .el-button {
    margin-top: 4px !important;
    padding: 8px 20px !important;
  }

  .el-dialog {
    width: 90% !important;
  }

  .btn_size {
    margin-top: -40px !important;
  }

  .el-form-item__error {
    padding-top: 0 !important;
  }

  .w60 {
    width: 100% !important;
  }

  .el-dialog__body {
    padding: 10px 16px !important;
  }

  .w32 {
    span {
      margin-left: -12px;
    }
  }

}

.el-tabs__header {
  padding: 0 16px !important;
}

@media (max-width: 540px) {
  .login_container {
    height: 100%;
    background-image: url(./assets/img/loginbj05.png), url(./assets/img/loginbj04.png), url(./assets/img/loginbj01.png), url(./assets/img/loginbj003.png), url(./assets/img/loginbj002.png);
    background-size: 218px 155px, 347px 120px, 490px 187px, 333px 226px, 139px 113px;
    background-position: right bottom, left bottom, left 90%, right top, left 130px;
    background-repeat: no-repeat;
    // background: url(./assets/img/loginImg.png) no-repeat;
    // background-size: 1870px 1052px;
    // background-attachment: fixed;
    // background-position: 10% 70%;
    box-sizing: border-box;
  }

  .top_ys {
    left: 10px;
    top: 40px;
    //padding-top: 0px;
    height: 100px;
    overflow: hidden;
  }

  .logo_ys {
    width: 44px;
    height: 44px;
    line-height: 44px;
    background: url(./assets/img/logobg.png);
    background-size: cover;

    img {
      width: 38px;
      height: auto;
      vertical-align: middle;
    }
  }

  .title_ys {
    margin-left: 22px;
    height: 38px;

    h2 {
      font-size: 1.1em;
      line-height: 44px;

      span {
        display: none;

      }
    }
  }

  .login_main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    //height: 400px;
    margin-top: -140px;
    margin-left: -120px;
    border-radius: 6px;
    background-color: transparent;
  }

  .login_other {
    img {
      width: 24px;
      height: auto;
      vertical-align: middle;
      margin: 16px;
    }
  }

  .font_location {
    font-size: 0.8em;
  }
}
</style>
